<template>
    <div class="programModify">
        <el-form 
            ref="ruleForm" 
            label-width="100px"
            :model="ruleForm">
            <el-form-item label="小程序名称" prop="appname">
                <el-select v-model="ruleForm.appname">
                    <!-- <el-option label='请选择' value='' ></el-option> -->
                    <el-option :label=item.appname :value=item.appname v-for="(item,index) in optionData" :key="index">{{item.appname}}</el-option>
                </el-select>
            </el-form-item>
            <el-upload
                class="upload-demo"
                action="http://www.yyjpai.com/index/operate/uploadsImg"
                :on-success=handleAvatarSuccess
                :file-list="fileList"
                name="file"
                list-type="picture">
                <el-button size="small" type="primary">点击修改</el-button>
                <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
            </el-upload>
            <el-form-item :label=inputAdd[0].title >
                <el-input v-model=inputAdd[0].value></el-input>
            </el-form-item>
            <el-form-item :label=inputAdd[1].title >
                <el-input v-model=inputAdd[1].value></el-input>
            </el-form-item>
            <el-form-item :label=inputAdd[2].title >
                <el-input v-model=inputAdd[2].value></el-input>
            </el-form-item>
        </el-form>
       <el-button @click="submitForm('ruleForm')" size="medium" class="addSubimit">提交</el-button>
    </div>
</template>
<script>
import { AddData,getChannel } from '@/assets/js'
export default {
    data(){
        return {
            urlData:"",//图片上传成功之后的参数
            add:0,//点击增加表单
            inputAdd:[//隐藏的表单
                {title:"文字1",value:this.title_0},
                {title:"文字2",value:this.title_1},
                {title:"文字3",value:this.title_2}
            ],
            optionData:[],//下拉
            urlSize:1,//上传图片数量
            fileList: [],//图片数组
            ruleForm:{//下拉选中
                appname:this.appname
            }
        }
    },
    mounted:function(){
        getChannel(this)
    },
    methods:{
        AddInput(){//点击增加表单
            if(this.add<=2){
                this.inputAdd[this.add].add = true;
                this.add = this.add + 1;
            }
        },
        handleAvatarSuccess(res, file) {//上传成功之后
            this.urlData = file.response.data.logo
        },
        submitForm:function(e){//点击提交
            var data = {
                appname:this.ruleForm.appname==''? this.appname:this.ruleForm.appname,
                id:this.id,
                logo:this.urlData == '' ? this.logo : this.urlData,
                title1:this.inputAdd[0].value ==''?this.title_0:this.inputAdd[0].value,
                title2:this.inputAdd[1].value ==''?this.title_1:this.inputAdd[1].value,
                title3:this.inputAdd[2].value ==''?this.title_2:this.inputAdd[2].value
            }
            AddData(this,e,data,'operate/editOperate')
        }
    },
    props:['appname','id',"logo","title_0","title_1","title_2"]
}
</script>